<template>
  <div style="height:220px;width:100%;background-color:transparent;" ref="myChart" :id="ecahtsContainer" @dblclick="getNewChart()" />

</template>
<style>
</style>

<script>
import extend from './../chart/js/extend'
// 引入echats依赖

// 引入 ECharts 主模块

var echarts = require('echarts/lib/echarts')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
require('echarts/lib/chart/line')
// require('echarts/lib/component/dataZoom')
require('echarts/lib/component/legend')
extend(echarts)
const guid = function () {
  function S4 () {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  }
  return (
    S4() +
    S4() +
    '-' +
    S4() +
    '-' +
    S4() +
    '-' +
    S4() +
    '-' +
    S4() +
    S4() +
    S4()
  )
}
var colors = ['#01FCE9', '#4694C4', '#675bba']
export default {
  data () {
    return{
    }
  },
  props: [
    // 传递行数据
    'hankou1',
    // 数据源
    'hankou2',
    'hankou3',
    'hankouDate',
    'chartTitle'
  ],
  mounted: function () {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(
      document.getElementById(this.ecahtsContainer),
      'essos'
    )
    this.init()
    this.chartInit()
  },
  methods: {
    // 配置项
    option: function () {
      let _this = this
      return {
        color: colors,
        title: {
          text: '汉口历年水位对比',
          top: '0',
          left: '0',
          textStyle: {
            color: '#03d1c7',
            fontSize: '12'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          orient: 'horizontal',
          right: '0',
          top: '0',
          data: [
            {name: '2016年', icon: 'rect'},
            {name: '2017年', icon: 'rect'},
            {name: '2018年', icon: 'rect'}
          ]
        },
        grid: {
          left: '0',
          right: '0',
          bottom: '6%',
          top: '15%',
          containLabel: true
        },
        xAxis: [
          {
            splitLine: {
              lineStyle: {
                width: 0.5,
                color: ['rgba(151,151,151,0.7)']
            }
              
              },
            type: 'category',
            //boundaryGap: false,
            data: this.hankouDate,
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            }
          }
        ],
        yAxis: [
          {
            splitLine: {
               lineStyle: {
                width: 0.5,
                color: ['rgba(151,151,151,0.7)']
            }
              },
              boundaryGap: ['0', '15%'],  
            type: 'value',
            axisLabel: {
              // show: true,
              textStyle: {
                color: '#fff'
              },
              
            }
          }
        ],
        series: [
          {
            name: '2016年',
            type: 'line',
            
            data:this.hankou1, 
            smooth: true
          },
           {
            name: '2017年',
            type: 'line',
            data:this.hankou2,
            smooth: true
          },
           {
            name: '2018年',
            type: 'line',
            data:this.hankou3,
            smooth: true
          }
        ]
      }
    },

    // 初始化函数
    init () {
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(this.option())
    },
    chartInit() {
      const self = this;//因为箭头函数会改变this指向，指向windows。所以先把this保存
      setTimeout(() => {
        window.onresize = function() {
            self.chart = echarts.init(self.$refs.myChart)// 获取id为myChart的dom元素，因为在普通元素上
            self.chart.resize()
        }
      },20)
    }
  },
  watch: {
    hankou1(){
       this.myChart.setOption(this.option())
    },
     hankou2(){
       this.myChart.setOption(this.option())
    },
     hankou3(){
       this.myChart.setOption(this.option())
    }
  },
  // 状态
  data () {
    return {
      // 图表实例
      myChart: {},
      // 容器ID使用guid防止全局多次复用容器重复
      ecahtsContainer: guid(),
      // 点名称
      chartDataName: '',
      // 主
      mouseCurValue: ''
    }
  }
}
</script>
